<template>
  <div>
    <Modal v-model="modal.show"  :loading="modal.loading" :title="modal.title"
           :mask-closable="false"
           :footer-hide=true width="800px"
           :closable="false">
      <Form ref="singleValidate" :model="rowData" label-position="right" :label-width="100" :rules="rules1">
        <FormItem :label="$t('organization')">
          <OrganizationTree ref="edtOrgSelect"
                            width="200px"
                            v-model="rowData.orgId"
                            :readonly="false"
                            prop="orgId"></OrganizationTree>
        </FormItem>
        <FormItem :label="$t('name')" prop="fenceName">
          <Input v-model="rowData.fenceName" :disabled="modal.readonly" maxlength=100></Input>
        </FormItem>
        <FormItem :label="$t('remark')">
          <Input v-model="rowData.note" :disabled="modal.readonly"></Input>
        </FormItem>
        <FormItem>
          <div style="float: right;">
            <Button v-show="modal.action!='VIEW'" type="primary"  @click="save" >{{$t('save')}}</Button>
            <Button @click="cancel">{{$t('cancel')}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import OrganizationTree from '@/components/topnav/OrganizationTree';
import Fence from '@/api/Fence'
import MapInfo from "@/view/Home/map/maptools/data/MapInfo";
import {apiResult} from "@/libs/util";
export default {
  components:{OrganizationTree},
  computed:{
    rules1(){
      return{fenceName:[{required: true, message: this.$t('name_must_be_enter'), trigger: 'blur'}]}
    },
  },
  data(){
    return{
      api: new Fence(),
      modal:{
        show:false,
        loading:false,
        loading1:false,
        loading2:false,
        readonly:false,
        title:"",
        action:"VIEW",
        callback:null
      },
      rowData: this.initRow(),

    }
  },
  methods:{
    /**
     * 取消
     */
    cancel(){
      if (!!this.modal.callback) this.modal.callback(0);//1成功 -1失败
      this.close();
    },
    /**
     * 关闭
     */
    close: function(){
      this.modal.show = false;
      //this.$emit("after-save-cancel",null)
    },

    initRow(){
      return{
        fenceName:null,
        orgId:null,
        fenceType:1,
      }
    },
    openDialog: function (action,row, callback) {
      this.modal.show=true;
      this.modal.readonly=false;
      this.modal.callback = callback;
      this.modal.action = action;
      if (action=="ADD"){
        this.modal.title=this.$t('add');
        this.rowData = this.initRow();
        this.modal.readonly=false;
      }else if (action=="VIEW"){
        this.modal.title=this.$t('browse');
        this.modal.readonly=true;
      }else if (action=="EDIT"){
        this.modal.title=this.$t('edit');
        this.modal.readonly=false;
      }
      if (row != null) {
        this.rowData = row;
      }
      //console.log(">>>>>>> FanceManageEdit.openDialog rowData=%o",this.rowData)
    },

    save(){
      let that = this;
      this.$refs["singleValidate"].validate((valid) => {
        if (that.modal.action == "VIEW") {
          that.close();
        }
        if (valid) {
          that.rowData.fenceType = 1;
          that.rowData.coordinateSystem = new MapInfo().get().coordinateType;
          if (!that.rowData.id) {
            that.api.add(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback(1);//1成功 -1失败
                that.close();

              },err=>{
                if (!!that.modal.callback) that.modal.callback(-1);//1成功 -1失败
              });
            })
          } else {
            that.api.update(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback(1);//1成功 -1失败
                that.close();

              },err=>{
                if (!!that.modal.callback) that.modal.callback(-1);//1成功 -1失败
              });
            })
          }
        }
      })
    }
  }
}
</script>
<style>

</style>
